define([ 'backbone',
         'components/pop/base',
         'text!components/pop/templates/rename.html',
         'core/utils'],
function( Backbone, Base, template, utils) {
    return Base.extend({
        template: _.template(template),
        className: function() {
            return this.options.className;
        },
        events: {
            'click .js-btn-cancel': 'hide',
            'click .js-btn-confirm': 'triggerCallback',
            'keydown .js-rename-placeholder': function(e) {
                if (e.keyCode === utils.keyCode['ENTER']) {
                    this.triggerCallback();
                }
            }
        },
        initialize: function(options) {
            Base.prototype.initialize.call(this, options);
            this.data = options.data;
        },
        render: function() {
            var that = this;
            this.$el.html(this.template({url: this.data}));
            return this;
        },
        positioning: function() {
            /* var position = this.target.offset();
            var demension = {
                height: this.target.outerHeight(),
                width: this.target.outerWidth()
            }
            var self = {
                height: this.$el.outerHeight(),
                width: this.$el.outerWidth()
            };

            this.$el.css({
                'display': 'block',
                'left': position.left - self.width,
                'top': position.top - self.height / 2 + demension.height / 2
            }); */
            var view = this;
            var className = view.options.className;

            view.$el.show();
            if (className.indexOf('left') !== -1) {
                view.$el.position({
                    of: view.target,
                    my: 'right center',
                    at: 'left center',
                    collision: 'none'
                });
            } else if(className.indexOf('bottom') !== -1) {
                view.$el.position({
                    of: view.target,
                    my: 'center top',
                    at: 'center bottom',
                    collision: 'none'
                });
            } else {
                view.$el.position({
                    of: view.target,
                    my: 'left center',
                    at: 'right center',
                    collision: 'none'
                });
            }

            view.el.className = view.options.className;
        },
        setData: function(data) {
            this.data = data;
            this.render();
        },
        reset: function(obj) {
            var callback = obj.callback,
                target = obj.target,
                trigger = obj.trigger,
                data = obj.data,
                className = obj.className || 'popover left';

            this.options.className = className;
            this.setCallback(callback);
            this.setTarget(target);
            this.setTrigger(trigger);
            this.setData(data);
            this.positioning();
            this.clearInput();
            this.show();
        },
        triggerCallback: function() {
            this.callback(this.$('.js-rename-placeholder').val());
            this.hide();
        },
        clearInput: function() {
            this.$('.js-link-placeholder').val('');
        }
    });
});
